import React, { Component } from 'react'

export default class App extends Component {
  render() {
    const NewPosition=withMouse(Position)
    return (
      <div>
        <NewPosition a={1}></NewPosition>
      </div>
    )
  }
}

class Position extends React.Component{
   render(){
    return <div style={{width:'500px',height:'500px',backgroundColor:'#ccc'}}>Postion的坐标是:(x:{this.props.x},y:{this.props.y})</div>
   }
}

/**
 * 编写高阶组件
 * 1、高级组件是一个函数，该函数的名称是以with作为开头
 * 2、高级组件传递的是一个组件
 */
function withMouse(WrapperComponent){
  class Mouse extends React.Component{
    constructor(){
      super()
      this.state={
        x:0,
        y:0
      }
    }
    handleMouse=(e)=>{
      this.setState({
        x:e.clientX,
        y:e.clientY
      })
    }
    componentDidMount(){
      window.addEventListener('mousemove',this.handleMouse)
    }
    componentWillUnmount(){
      window.removeEventListener('mousemove',this.handleMouse)
    }
    render(){
      return <WrapperComponent {...this.state} {...this.props}></WrapperComponent>
    }
  }
  return Mouse
}
